<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 11 RenderTexture</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x000000);
// create a renderer instance
// var renderer = new PIXI.autoDetectRenderer(800, 600);
var renderer = new PIXI.CanvasRenderer(800, 600);
// set the canvas width and height to fill the screen
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// OOH! SHINY!
// create two render textures.. these dynamic textures will be used to draw the scene into itself
var renderTexture = new PIXI.RenderTexture(800, 600);
var renderTexture2 = new PIXI.RenderTexture(800, 600);
var currentTexture = renderTexture;
// create a new sprite that uses the render texture we created above
var outputSprite = new PIXI.Sprite(currentTexture);
// align the sprite
outputSprite.position.x = 800/2;
outputSprite.position.y = 600/2;
outputSprite.anchor.x = 0.5;
outputSprite.anchor.y = 0.5;
// add to stage
stage.addChild(outputSprite);
var stuffContainer = new PIXI.DisplayObjectContainer();
stuffContainer.position.x = 800/2;
stuffContainer.position.y = 600/2
stage.addChild(stuffContainer);
// create an array of image ids..
var fruits = ["spinObj_01.png", "spinObj_02.png",
"spinObj_03.png", "spinObj_04.png",
"spinObj_05.png", "spinObj_06.png",
"spinObj_07.png", "spinObj_08.png"];
// create an array of items
var items = [];
// now create some items and randomly position them in the stuff container
for (var i=0; i < 20; i++)
{
var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
item.position.x = Math.random() * 400 - 200;
item.position.y = Math.random() * 400 - 200;
item.anchor.x = 0.5;
item.anchor.y = 0.5;
stuffContainer.addChild(item);
console.log("_")
items.push(item);
};
// used for spinning!
var count = 0;
requestAnimFrame(animate);
function animate() {
requestAnimFrame( animate );
for (var i=0; i < items.length; i++)
{
// rotate each item
var item = items[i];
item.rotation += 0.1;
};
count += 0.01;
// swap the buffers..
var temp = renderTexture;
renderTexture = renderTexture2;
renderTexture2 = temp;
// set the new texture
outputSprite.setTexture(renderTexture);
// twist this up!
stuffContainer.rotation -= 0.01
outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2;
// render the stage to the texture
// the true clears the texture before content is rendered
renderTexture2.render(stage, new PIXI.Point(0,0), true);
// and finally render the stage
renderer.render(stage);
}
</script>
</body>
</html>
